<script>
export default {
  name: 'DefaultCommonBody',
  data() {
    return {
      bodyHeight: {
        height: '672px'
      },
      setting: {},
      templateName: null // 模版信息
    }
  },
  created() {
    this.$bus.on('moreTemp', this.initTemp)
    this.$bus.on('scrollHeight', this.handleResize)
  },
  beforeDestroy() {
    this.$bus.off('moreTemp')
    this.$bus.off('scrollHeight', this.handleResize)
  },
  methods: {
    initTemp(data) {
      this.$nextTick(() => {
        this.setting = data
        if (data !== undefined && data !== null) {
          const path = '/' + data.mbdl + '/' + data.mbfl + '/more/' + data.mb
          this.templateName = () => import(`@/template${path}`)
        }
      })
    },
    handleResize() {
      this.$nextTick(() => {
        const height = this.$refs.moreBody.scrollHeight - 110
        this.bodyHeight.height = height + 'px'
      })
    }
  }
}
</script>

<template>
  <div class="content-common-body" :style="bodyHeight">
    <div class="more-content">
      <div ref="moreBody" class="content-body">
        <component :is="templateName" v-if="templateName" :temp="setting" />
        <el-empty v-else :image-size="200" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-common-body {
  width: 100%;
  position: relative;
  .more-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -105px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    .content-body {
      height: 672px;
    }
  }
}
</style>
